import React, { memo } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { CateListWrapper,ItemWrapper } from './style'
import {
  getCurrentIdAction
} from '../../store/actionCreators'
export default memo(function CateList() {
  const dispatch = useDispatch()
  const { cateList,currentId } = useSelector(state => ({
    cateList: state.getIn(['djRadio', 'cateList']),
    currentId:state.getIn(['djRadio','currentId'])
  }), shallowEqual)
  const chooseCate = (id) => {
    dispatch(getCurrentIdAction(id))
  }
  const categories = cateList || []
  return (
    <CateListWrapper>
      {
        categories.map(item => {
          return (
            <ItemWrapper key={item.id} imgUrl={item.picWebUrl} isActive={item.id === currentId} onClick={e => chooseCate(item.id)}>
              <div className="icon"></div>
              <div className="name">{item.name}</div>
            </ItemWrapper>
          )
        })
      }
    </CateListWrapper>
  )
})
